<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="消息详情"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="messageList"
            @pullup="loadMore"
        >

            <!-- 消息列表组件 -->
            <div
                class="message-item"
                v-for="(item,index) of messageList"
                :key="index"
            >
                <div class="message-time">{{item.messageTime}}</div>
                <div class="message-main">
                    {{item.messageInfo}}
                </div>
            </div>
            <!-- 消息列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'MessageDetail',
    components: {
        CommonHeader,
        CommonScroll
    },
    data () {
        return {
            scrollStyle: {
                top: "1.11rem",
                left: "0",
                right: "0",
                bottom: "0",
            },
            messageList: []
        }
    },
    methods: {
        loadMore () { }
    }
}
</script>

<style lang="stylus" scoped>
.message-time
    line-height 1.11rem
    text-align center
    font-size 0.33rem
    color #969696
.message-main
    margin 0 0.26rem
    padding 0.46rem 0.26rem
    background #fff
    border-radius 5px
    font-size 0.33rem
    color #666
    line-height 1.5
</style>


